<!DOCTYPE html>
<html>
<head>
  <meta content="IE=11.0000" http-equiv="X-UA-Compatible" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="icon" type="image/png" href="__PUBLIC__/static/admin/i/favicon.ico">
  <title>登录页面</title>
  <link rel="stylesheet" type="text/css" href="__PUBLIC__/static/admin/login/css/style2.css">
<script src="__PUBLIC__/static/admin/login/js/jquery.min.js"></script>
</script>

  <script type="text/javascript">
    $(function(){
      //得到焦点
      $("#password").focus(function(){
              $("#left_hand").animate({
                      left: "150",
                      top: " -38"
              },{step: function(){
                      if(parseInt($("#left_hand").css("left"))>140){
                              $("#left_hand").attr("class","left_hand");
                      }
              }}, 2000);
              $("#right_hand").animate({
                      right: "-64",
                      top: "-38px"
              },{step: function(){
                      if(parseInt($("#right_hand").css("right"))> -70){
                              $("#right_hand").attr("class","right_hand");
                      }
              }}, 2000);
      });
      //失去焦点
      $("#password").blur(function(){
              $("#left_hand").attr("class","initial_left_hand");
              $("#left_hand").attr("style","left:100px;top:-12px;");
              $("#right_hand").attr("class","initial_right_hand");
              $("#right_hand").attr("style","right:-112px;top:-12px");
      });
    });
  </script>
  <meta name="GENERATOR" content="MSHTML 11.00.9600.17496" />
</head>

<body>
  <div class="top_div">
    <h1 style="text-align:center;line-height:200px;color:white">孟凡后台管理登录</h1>
  </div>
  
  <div style="background: rgb(255, 255, 255); margin: -120px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 240px; text-align: center;">
    <div style="width: 165px; height: 96px; position: absolute;">
      <div class="tou"></div>

      <div class="initial_left_hand" id="left_hand"></div>

      <div class="initial_right_hand" id="right_hand"></div>
    </div>

    <form action="">
      <p style="padding: 30px 0px 10px; position: relative;"><span class="u_logo"></span><input class="ipt" name="username" type="text" placeholder="请输入用户名" value="" id="username" /></p>

      <p style="position: relative;">
      <span class="p_logo"></span>
      <input class="ipt" id="password" type="password" name="password" placeholder="请输入密码" value="" /></p>
	    <p style="position: relative;padding: 10px 0 10px 0"><input class="ipt" type="text" name="verify" id="verify" maxlength="4" placeholder="请输入验证码" /></p>

      <div style="height: 50px; line-height: 50px; margin-top: 5px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">
        <p style="margin: 10px 35px 20px 45px;">
	        <span style="float:left">
	        </span>
	        <span>
          <span style="line-height: 37px;">点击图片切换&nbsp;</span>
          <img src="__CONTROLLER__/verify" id="verify" onclick="this.src='__CONTROLLER__/verify/'+Math.random()" alt="验证码" width="100px" height="37px"></span>
	        <span style="float:right"><input type="submit" style="background: rgb(0, 142, 173);width: 100px; padding: 7px 10px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold;" value="登录"/></span></p>
      </div>
    </form>
  </div>

  <script src="__PUBLIC__/static/layer/layer.js"></script>
  <script>
      $('form').submit(function(){
          $.post('__SELF__',{'username':$('#username').val(),'password':$('#password').val(),'verify':$("#verify").val()},function(res){
              if(res.status){
                  layer.closeAll();
                  layer.msg(res.msg);
                  location.href='{:U("__MODULE__/index/index")}'
              }else{
                  $("#verifyImg").attr('src', '__CONTROLLER__/verify/'+Math.random());
                  layer.alert(res.msg,{icon:5});
              }
          });
          return false;
      })
  </script>
</body>
</html>
